<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页 - 示例代码</title>
    <link rel="stylesheet" href="csgo.css">
</head>
<body>
    <header class="header">
        <nav class="navbar"> 
            <div class="logo">
                <h1>我的个人主页</h1>
            </div>
            <ul class="nav-menu">
                <li class="nav-item"><a href="#about" class="nav-link">关于我</a></li>
                <li class="nav-item"><a href="#education" class="nav-link">教育背景</a></li>
                <li class="nav-item"><a href="#skills" class="nav-link">技能特长</a></li>
                <li class="nav-item"><a href="#projects" class="nav-link">项目经历</a></li>
                <li class="nav-item"><a href="#contact" class="nav-link">联系方式</a></li>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
    </header>

    <main>
        <section id="about" class="hero">
            <div class="hero-content">
                <img src="https://ts1.tc.mm.bing.net/th/id/R-C.5f20f9a762b89cde1546ac92e82655aa?rik=TCFeIbN6MpEE1Q&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn11%2f377%2fw1777h1000%2f20180612%2ffeeb-hcufqih5403465.jpg&ehk=EtX1i1soelVlmcE9taOcadt4Zo%2fh7RZCy7%2by8jdp6Dk%3d&risl=&pid=ImgRaw&r=0" alt="个人照片" class="profile-img">
                <h2>Dante</h2>
                <p class="subtitle">猎魔人</p>
                <p class="description">
                    寻找喜欢乱开传送门的老哥，capcom知名战神
                </p>
                <a href="#contact" class="btn btn-primary">联系我</a>
            </div>
        </section>

        <section id="education" class="section">
            <div class="container">
                <h2 class="section-title">教育背景</h2>
                <div class="education-container">
                    <div class="education-item">
                        <h3>时钟塔</h3>
                        <p class="period">xxxx年9月 - 2018年6月15日下午4；04</p>
                        <p>二段跳滞空 本科</p>
                        <p>主修课程：W,A,S,D</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="skills" class="section section-alt">
            <div class="container">
                <h2 class="section-title">技能特长</h2>
                <div class="skills-container">
                    <div class="skill-category">
                        <h3>前端技术</h3>
                        <div class="skill-items">
                            <div class="skill-item">
                                <span class="skill-name">皇家护卫</span>
                                <div class="skill-bar">
                                    <div class="skill-level" style="width: 100%"></div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <span class="skill-name">欺诈师</span>
                                <div class="skill-bar">
                                    <div class="skill-level" style="width: 85%"></div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <span class="skill-name">枪神</span>
                                <div class="skill-bar">
                                    <div class="skill-level" style="width: 100%"></div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <span class="skill-name">剑圣</span>
                                <div class="skill-bar">
                                    <div class="skill-level" style="width: 80%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="skill-category">
                        <h3>后端技术</h3>
                        <div class="skill-items">
                            <div class="skill-item">
                                <span class="skill-name">魔人</span>
                                <div class="skill-bar">
                                    <div class="skill-level" style="width: 50%"></div>
                                </div>
                            </div>
                            <div class="skill-item">
                                <span class="skill-name">真魔人</span>
                                <div class="skill-bar">
                                    <div class="skill-level" style="width: 1000%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="projects" class="section">
            <div class="container">
                <h2 class="section-title">项目经历</h2>
                <div class="projects-container">
                    <div class="project-card">
                        <div class="project-img">
                            <img src="https://ts2.tc.mm.bing.net/th/id/OIP-C.f4NxDoh6Btm4iz7thxg_5AHaEK?rs=1&pid=ImgDetMain&o=7&rm=3" alt="项目1">
                        </div>
                        <div class="project-content">
                            <h3>Devil May Cry 5</h3>
                            <p class="project-period">2018年6月15日下午4；04</p>
                            <p class="project-description">
                                带尼禄打野发育，让老哥感受抛瓦。
                            </p>
                            <div class="project-tags">
                                <span class="tag">格挡</span>
                                <span class="tag">切欺诈师躲龙车</span>
                                <span class="tag">火箭筒消耗</span>
                                <span class="tag">我在等真魔人条你在等什么？</span>
                            </div>
                        </div>
                    </div>
                    <div class="project-card">
                        <div class="project-img">
                            <img src="https://imgres.iefans.net/iefans/77/381503-202007160658025f0f89fa8701e.jpg" alt="项目2">
                        </div>
                        <div class="project-content">
                            <h3>钻研武器使用</h3>
                            <p class="project-period">？？？</p>
                            <p class="project-description">
                                看看画像，大剑变身真魔人。
                            </p>
                            <div class="project-tags">
                                <span class="tag">按Q</span>
                                <span class="tag">Shift + W + 右键</span>
                                <span class="tag">长按空格起飞</span>
                                <span class="tag">左右键：斩杀线到了</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="contact" class="section section-alt">
            <div class="container">
                <h2 class="section-title">联系方式</h2>
                <div class="contact-container">
                    <div class="contact-info">
                        <div class="contact-item">
                            <div class="contact-icon">📧</div>
                            <div class="contact-details">
                                <h3>电子邮箱</h3>
                                <p>无</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">📱</div>
                            <div class="contact-details">
                                <h3>手机号码</h3>
                                <p>无</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">📍</div>
                            <div class="contact-details">
                                <h3>所在地址</h3>
                                <p>steam</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">🔗</div>
                            <div class="contact-details">
                                <h3>社交媒体</h3>
                                <p>
                                    <a href="#">X</a> | 
                                    <a href="#">blibli</a> | 
                                    <a href="#">YouTobe</a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="contact-form">
                        <h3>给我留言</h3>
                        <form id="contactForm">
                            <div class="form-group">
                                <label for="name">姓名</label>
                                <input type="text" id="name" name="name" required>
                            </div>
                            <div class="form-group">
                                <label for="email">邮箱</label>
                                <input type="email" id="email" name="email" required>
                            </div>
                            <div class="form-group">
                                <label for="message">留言内容</label>
                                <textarea id="message" name="message" rows="5" required></textarea>
                            </div>
                            <button type="submit" class="btn btn-primary">发送留言</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 Dante个人主页. 保留所有权利.</p>
            <p>本页面使用HTML5和CSS3构建，采用响应式设计</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>